$baseFontSize: 40px !default;
$red: #D71345 !default;
$fontRed: #E61E4B !default;
$opacity: 1 !default;
@function rem($px) {
  @return $px / $baseFontSize * 1rem;
}

@mixin displayflex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($size:1) {
  -webkit-box-flex: $size;
  -moz-box-flex: $size;
  -webkit-flex: $size;
  -ms-flex: $size;
  flex: $size;
}

@mixin flexflowCol($direction:column,$dir:vertical) {
  -webkit-box-orient: $dir;
  -ms-box-orient: $dir;
  -moz-box-orient: $dir;
  -webkit-flex-flow: $direction nowrap;
  -ms-flex-flow: $direction nowrap;
  -moz-flex-flow: $direction nowrap;
  flex-flow: $direction nowrap;
}

@mixin flexflowRow($direction:row,$dir:horizontal) {
  -webkit-box-orient: $dir;
  -ms-box-orient: $dir;
  -moz-box-orient: $dir;
  -webkit-flex-flow: $direction nowrap;
  -ms-flex-flow: $direction nowrap;
  -moz-flex-flow: $direction nowrap;
  flex-flow: $direction nowrap;
}

@mixin border-radius($radius:4px) {
  -webkit-border-radius: rem($radius);
  -moz-border-radius: rem($radius);
  -ms-border-radius: rem($radius);
  -o-border-radius: rem($radius);
  border-radius: rem($radius);
}

@mixin box-sizing($set:border-box) {
  -webkit-box-sizing: $set;
  -moz-box-sizing: $set;
  -ms-box-sizing: $set;
  -o-box-sizing: $set;
  box-sizing: $set;
}

* {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  font-family: "方正粗圆简体", Helvetica, sans-serif;
  -webkit-touch-callout: none;
  @include box-sizing(border-box);
  outline: none;
}

a:active, a:hover, a:link, a:visited {
  text-decoration: none;
  outline: none;
}
html,body{
  width: 100%;
  height: 100%;
  font-size: 20px;
  background-color: #F5F5F5;
}
body {
  position: absolute;
  left:0;
  top: 0;
  right: 0;
  bottom:0;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

img {
  display: block;
  width: 100%;
}

ul, li {
  list-style: none;
}

.confirm-bg {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 9998;
  background-color: rgba(69, 69, 69, .60);
  visibility: hidden;
  opacity: 0;
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
}

.confirm-bg.confirm-bg-visible {
  visibility: visible;
  opacity: 1;
}

.confirm-msg {
  opacity: 0;
  -webkit-transform: translate3d(0, -50%, 0) scale(1.185);
  transform: translate3d(0, -50%, 0) scale(1.185);
  -webkit-transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
  &.in {
    opacity: 1;
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
    -webkit-transfrom: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1);
  }
  &.out {
    opacity: 0;
    z-index: 10999;
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
    -webkit-transform: translate3d(0, 0, 0) scale(0.815);
    transform: translate3d(0, 0, 0) scale(0.815);
  }
  left: 50%;
  top: 50%;
  margin-left: rem(-250px);
  z-index: 9999;
  position: absolute;
  width: rem(500px);
  .confirm-msg-title {
    border-top-left-radius: rem(10px);
    border-top-right-radius: rem(10px);
    background-color: white;
    height: rem(69px);
    border-bottom: 1px solid #EBEBF5;
    line-height: rem(69px);
    text-align: center;
    font-size: rem(34px);
    color: $fontRed;
  }
  .confirm-msg-content {
    background-color: white;
    padding: rem(20px) rem(26px);
    border-bottom-left-radius: rem(10px);
    border-bottom-right-radius: rem(10px);
    border-bottom: rem(10px) solid #E61E4B;
    &.has-btn {
      border: 0;
      border-radius: 0;
    }
    p {
      color: #4F545B;
      font-size: rem(28px);
    }
  }
  .confirm-msg-btns {
    @include displayflex;
    @include flexflowRow(row, horizontal);
    border-top: 1px solid #E4E4E4;
    padding: rem(7px) 0;
    background: white;
    border-bottom-left-radius: rem(10px);
    border-bottom-right-radius: rem(10px);
    span {
      display: block;
      @include flex(1);
      height: rem(74px);
      line-height: rem(74px);
      font-size: rem(28px);
      text-align: center;
      box-sizing: border-box;
      color: #4F545B;
    }
    span:first-child {
      color: $fontRed;
    }
    span + span {
      border-left: 1px solid #E4E4E4;
    }
  }
  .confirm-msg-close {
    margin: rem(60px) auto 0;
    width: rem(58px);
    height: rem(58px);
    background: url(/old/images/close.png) no-repeat;
    background-size: rem(58px);
  }
}

.alert-msg {
  position: absolute;
  z-index: 10000;
  top: 40%;
  margin-left: -6.75rem;
  text-align: center;
  opacity: 0;
  left: 50%;
  color: white;
  background-color: rgba(0, 0, 0, .65);
  padding: rem(28px) rem(64px);
  -webkit-transition: 0.4s ease-out;
  transition: 0.4s ease-out;
  font-size: rem(28px);
  border-radius: rem(6px);
  -webkit-transform: translate3d(0, 0, 0) scale(1.185);
  transform: translate3d(0, 0, 0) scale(1.185);
  -webkit-transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
  box-sizing: border-box;
}

.alert-msg.in {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

.alert-msg.out {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(0.815);
  transform: translate3d(0, 0, 0) scale(0.815);
}

.wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  left: 0;
  top: 0;
  z-index: 100;
  background: #f5f5f5;
  .indexbg {
    min-height: rem(830px);
    background-color: #00aac7;
  }

  .part1_header {
    margin-top: rem(-95px);
    min-height: rem(322.5px);
  }

  .part1 {
    width: 100%;
    background-color: #bf90db;
    padding-top: rem(12px);
    padding-bottom: rem(50px);
    margin-top: rem(-2px);
    input[name=mobile] {
      display: block;
      width: rem(484px);
      height: rem(70px);
      font-size: rem(28px);
      padding: rem(20px) rem(16px);
      line-height: rem(28px);
      margin: 0 auto rem(20px);
      border: rem(2px) solid #bf90db;
      outline: none;
      text-align: center;
      @include border-radius(6px);
    }
    .get_voucher {
      display: block;
      margin: 0 auto;
      width: rem(320px);
      height: rem(88px);
      background: url(https://images.simpletour.com/activity/valentine/get_voucher_icon.png) no-repeat center;
      background-size: contain;
      font-size: rem(24px);
      color: #fff;
      text-indent: -9999px;
    }
    .items {
      width: 100%;
      padding: rem(30px) rem(30px) 0 rem(32px);
      .row {
        @include displayflex;
        @include flexflowRow();
        a {
          display: block;
          @include flex;
          img {
            min-height: rem(205px);
          }
        }
        &:first-child {
          margin-bottom: rem(20px);
        }
      }
    }
  }

  .part2_header {
    margin-top: rem(-50px);
    min-height: rem(316px);
  }

  .part2 {
    margin-top: rem(-2px);
    padding-bottom: rem(30px);
    background: -moz-linear-gradient(top, #ff7f6b, #ffa736);
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff7f6b), to(#ffa736));
    background: -o-linear-gradient(top, #ff7f6b, #ffa736);
    .tabs {
      width: 100%;
      padding: 0 rem(36px);
      font-size: 0;
      @include displayflex;
      @include flexflowRow();
      span {
        @include flex;
        display: block;
        color: transparent;
        text-indent: -9999px;
      }
      span.tourism {
        width: rem(271px);
        height: rem(72px);
        background: url(https://images.simpletour.com/activity/valentine/tourism_btn.png) no-repeat center;
        background-size: contain;
        &:active {
          background: url(https://images.simpletour.com/activity/valentine/tourism_btn_active.png) no-repeat center;
          background-size: contain;
        }
      }
      span.show_photo {
        background: url(https://images.simpletour.com/activity/valentine/show_photo_btn.png) no-repeat center;
        background-size: contain;
        margin-left: rem(26px);
        &:active {
          background: url(https://images.simpletour.com/activity/valentine/show_photo_btn_active.png) no-repeat center;
          background-size: contain;
        }
      }
    }
    .panels {
      .panel {
        display: none;
        &.show {
          display: block;
        }
        &.tourism {
          padding: rem(27px) rem(55px) rem(85px) rem(65px);
          .prod {
            display: block;
            &:first-child {
              padding-bottom: rem(20px);
            }
            &:nth-child(2) {
              padding-bottom: rem(12px);
            }
            img {
              min-height: rem(191.6px);
            }
          }
        }
        &.camerist {
          padding: rem(32px) rem(55px) rem(105px) rem(50px);
          img {
            min-height: rem(644px);
          }
        }
      }
    }
  }

  .part3_header {
    margin-top: rem(-100px);
    min-height: rem(320px);
  }

  .part3 {
    margin-top: rem(-54px);
    padding: 0 rem(46px) rem(72px) rem(64px);
    background: -moz-linear-gradient(top, #4dcaff, #4da5ff);
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#4dcaff), to(#4da5ff));
    background: -o-linear-gradient(top, #4dcaff, #4da5ff);
    img {
      min-height: rem(450px);
    }
    .order_hotel {
      display: block;
      width: rem(255px);
      height: rem(72px);
      margin: rem(16px) auto 0;
      font-size: 0;
      color: #fff;
      text-indent: -9999px;
      background: url(https://images.simpletour.com/activity/valentine/order_hotel_icon.png) no-repeat center;
      background-size: contain;
    }
  }

  .part4_header {
    margin-top: rem(-70px);
    min-height: rem(279px);
  }

  .part4 {
    margin-top: rem(-2px);
    background: -moz-linear-gradient(top, #1dbeb0, #00aac5);
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#1dbeb0), to(#00aac5));
    background: -o-linear-gradient(top, #1dbeb0, #00aac5);
    .contain {
      padding: rem(16px) rem(48px) rem(20px) rem(46px);
      .rule {
        width: 100%;
        font-size: rem(24px);
        font-weight: bold;
        line-height: rem(44px);
        color: #fff;
        padding: rem(16px) rem(18px) rem(16px) rem(28px);
        border: rem(4px) dashed #fff;
        margin-bottom: rem(18px);
        @include border-radius(8px);
      }
      .slogan {
        width: rem(546px);
        height: rem(44px);
        line-height: rem(44px);
        background: #fff;
        font-size: rem(24px);
        font-weight: bold;
        color: #f77ba4;
        text-align: center;
        @include border-radius(8px);
      }
      .insure {
        display: block;
        width: rem(257px);
        height: rem(74px);
        font-size: 0;
        color: #fff;
        text-indent: -9999px;
        margin: rem(18px) auto 0;
        background: url(https://images.simpletour.com/activity/valentine/insure_icon.png) no-repeat center;
        background-size: contain;
      }
    }
    .scanCode {
      padding: 0 rem(48px) rem(90px) rem(46px);
      @include displayflex;
      @include flexflowRow();
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -webkit-align-items: center;
      align-items: center;
      background: url(https://images.simpletour.com/activity/valentine/shading.png) no-repeat center;
      background-size: 100%;
      .info {
        font-size: rem(28px);
        font-weight: bold;
        line-height: rem(44px);
        color: #fff;
        margin-left: rem(30px);
        @include flex;
        .info-content {
          font-size: rem(24px);
        }
      }
      .qrcode {
        display: block;
        width: rem(222px);
        height: rem(222px);
        background: url(https://images.simpletour.com/activity/valentine/qrcode.png) no-repeat center;
        background-size: contain;
        border: rem(4px) solid #000;
        @include border-radius(8px);
      }
    }
  }

  .part5_header {
    margin-top: rem(-40px);
    min-height: rem(233px);
  }

  .part5 {
    margin-top: rem(-2px);
    background: -moz-linear-gradient(top, #eaaac1, #fbc9a2);
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#eaaac1), to(#fbc9a2));
    background: -o-linear-gradient(top, #eaaac1, #fbc9a2);
    .pictures {
      min-height: rem(519px);
      padding: rem(20px) rem(46px);
    }
    .part5_footer {
      min-height: rem(198px);
      padding: rem(20px) rem(14px) rem(47px) rem(24px);
    }
  }
}
@-moz-keyframes rotate{
  0%{
    -moz-transform:rotate(0deg);
  }
  100%{
    -moz-transform:rotate(360deg);
  }
}
@-webkit-keyframes rotate{
  0%{
    -webkit-transform:rotate(0deg);
  }
  100%{
    -webkit-transform:rotate(360deg);
  }
}
@keyframes rotate{
  0%{
    transform:rotate(0deg);
  }
  100%{
    transform:rotate(360deg);
  }
}
.audio{
  position: absolute;
  width: rem(48px);
  height: rem(48px);
  top: rem(16px);
  right: rem(16px);
  background: url(https://images.simpletour.com/activity/valentine/audio_icon.png) no-repeat center;
  background-size: contain;
  z-index: 10000;
  &.on{
    -moz-animation:rotate 10s infinite linear;
    -webkit-animation:rotate 10s infinite linear;
    animation:rotate 10s infinite linear;
  }
}

